<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>完成巡查</title>
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/globle.css" />
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />

    <style>
        span {
            margin: 10px;
        }

        .Tabl {
            height: 50px;
            width: 88%;
            font-size: 14px;
            font-weight: bold;
            text-align: left;
            margin-left: 6%;
        }

        .Td1 {
            color: #B8B8B8;
            width: 70px;
        }

        .Td2 {
            color: #000000;
            text-align: right;
            width: 80px;
        }

        .Hr {
            height: 1px;
            width: 96%;
            background-color: #faf7f7;
            margin-left: 2%;
        }

        .Butt {
            border: 1px solid #B8B8B8;
            border-radius: 20px;
            color: #ffffff;
            height: 17px;
            width: 17px;
            outline: none;
        }

        .TabImg {
            height: 150px;
            width: 96%;
            margin-left: 2%;
            border: 10px solid #d8d8d8;
        }

        .TdImg1 {
            height: 110px;
            width: 90px;
        }

        .TdImg2 {
            height: 110px;
            width: 90px;
        }

        .ButAdd {
            height: 110px;
            width: 100px;
            font-size: 100px;
            color: #ffffff;
            background-color: #b8b8b8;
        }

        .TabL {
            height: 75px;
            width: 88%;
            font-size: 16px;
            font-weight: bold;
            text-align: left;
            margin-left: 6%;
        }

        .ButL {
            height: 40px;
            width: 100%;
            background-color: #d0d0d0;
            position: fixed;
            bottom: 0;
        }

        .Td3 {
            background-color: #1abc9c;
            text-align: center;
            width: 50%;
        }

        select {
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            border: none;
            background: none;
        }
    </style>
</head>

<body>
    <button style="background-color: #F2F2F2;height: 40px;width: 100%;font-size: 18px;">发布维修区域</button>
    <input type="hidden" id="ids" />
    <table class="Tabl">
        <tr>
            <td class="Td1">发布人：</td>
            <td class="Td2">
                <input value="" id="situation" disabled="disabled" />
            </td>
        </tr>
    </table>
    <hr class="Hr" />
    <table class="Tabl">
        <tr>
            <td class="Td1">维修内容：</td>
        </tr>
    </table>
    <table class="TabL">
        <tr>
            <td>
                <textarea rows="3" cols="35" id="repairContext" placeholder="" disabled="disabled"></textarea>
            </td>
        </tr>
    </table>
    <hr class="Hr" />
    <table class="Tabl">
        <tr>
            <td class="Td1">标段名称：</td>
            <td class="Td2">
                <input value="" id="departProjectid" disabled="disabled" />
            </td>
        </tr>
    </table>
    <hr class="Hr" />
    <table class="Tabl">
        <tr>
            <td class="Td1">绿地名称：</td>
            <td class="Td2">
                <input value="" id="greenBeltName" disabled="disabled" />
            </td>
        </tr>
    </table>
    <hr class="Hr" />
    <table class="Tabl">
        <tr>
            <td class="Td1">维修人员：</td>
            <td class="Td2">
                <input value="" id="receiver" disabled="disabled" />
            </td>
        </tr>
    </table>

    <hr class="Hr" />
    <table class="Tabl">
        <tr>
            <td class="Td1">预期时间：</td>
            <td class="Td2">
                <input type="" value="" id="completeTime" disabled="disabled" />
            </td>
        </tr>
    </table>

    <hr class="Hr" />
    <table class="Tabl">
        <tr>
            <td class="Td1">发布时间：</td>
            <td class="Td2">
                <input type="" value="" id="publishTime" disabled="disabled" />
            </td>
        </tr>
    </table>

    <hr class="Hr" />
    <div style="padding: 10px;">
        <div id="imgBox1"></div>
    </div>
    <button style="background-color: #F2F2F2;height: 40px;width: 100%;font-size: 18px;">执行维修区域</button>
    <table class="Tabl">
        <tr>
            <td class="Td1">完成时间：</td>
            <td class="Td2">
                <input type="date" value="" id="completeTime1" disabled="disabled" />
            </td>
        </tr>
    </table>
    <hr class="Hr" />
    <table class="Tabl">
        <tr>
            <td class="Td1">维修说明：</td>
        </tr>
    </table>
    <!-- <hr class="Hr" /> -->
    <table class="TabL">
        <tr>
            <td>
                <textarea rows="3" cols="35" id="caption" placeholder="" disabled="disabled"></textarea>
            </td>
        </tr>
    </table>

    <hr class="Hr" />
    <div style="padding: 10px;">
        <div id="imgBox2"></div>
    </div>
    <div style="
        width: 80%;
        position: absolute;
        left: 10%;
        right: 10;
        top: 60%;
        z-index: 1000000;
        text-align: center;
      " id="bigImage"></div>
    <div style="
        width: 80%;
        position: absolute;
        left: 10%;
        right: 10;
        top: 120%;
        z-index: 1000000;
        text-align: center;
      " id="bigImage1"></div>
</body>
<script type="text/javascript" src="../../script/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script src="../../script/webuploader.js"></script>
<script src="../../script/diyUpload.js"></script>
<script src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>

<script type="text/javascript">
    apiready = function () {
        var goodsdId = api.pageParam.typeId;
        var sid = goodsdId;
        //alert(sid);
        $.ajax({
            type: "post",
            async: false, //同步执行
            url: BaseServiceUrl + "mobile/repairManage/findRepairOne.json",
            data: {
                pid: sid,
            },
            dataType: "json", //返回数据形式为json
            success: function (result) {
                var datas = result.obj;
                $("#situation").val(datas.publishUser);
                $("#repairContext").val(datas.repairContext)
                $("#greenBeltName").val(datas.greenName);
                $("#departProjectid").val(datas.areaName);
                $("#publishTime").val(datas.createTime);
                $("#receiver").val(datas.receiver);
                $("#remark").val(datas.remark);
                $("#ids").val(datas.id);
                $("#caption").val(datas.context);
                $("#completeTime1").val(datas.completeTime)
                var date = new Date(datas.repairTime); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + "-";
                var M =
                    (date.getMonth() + 1 < 10
                        ? "0" + (date.getMonth() + 1)
                        : date.getMonth() + 1) + "-";
                var D =
                    date.getDate() < 10
                        ? "0" + date.getDate() + " "
                        : date.getDate() + " ";
                var h =
                    date.getHours() < 10
                        ? "0" + date.getHours() + ":"
                        : date.getHours() + ":";
                var m =
                    date.getMinutes() < 10
                        ? "0" + date.getMinutes() + ":"
                        : date.getMinutes() + ":";
                var s =
                    date.getSeconds() < 10
                        ? "0" + date.getSeconds()
                        : date.getSeconds();
                var sss = Y + M + D + h + m + s;
                $("#completeTime").val(sss);
            },
        });


        var id = goodsdId;
        // alert(id);
        $.ajax({
            type: "post",
            async: false, //同步执行
            url: BaseServiceUrl + "mobile/repairManage/viewAndImage.json",
            data: {
                id: id,
            },
            dataType: "json", //返回数据形式为json
            success: function (result) {
                for (var i = 0; i < result.obj.length; i++) {
                    $("#imgBox1").append(
                        '<div style="margin-left:5px;float:left;margin-top:5px;"><img width="100" height="100"onclick=\'showBig(this)\'  src="' +
                        serverImage +
                        result.obj[i].image +
                        '"\/><\/div>'
                    );
                }
            },
        });
        var id = goodsdId;
        // alert(id);
        $.ajax({
            type: "post",
            async: false, //同步执行
            url: BaseServiceUrl + "mobile/repairManage/viewAndConImage.json",
            data: {
                id: id,
            },
            dataType: "json", //返回数据形式为json
            success: function (result) {
                for (var i = 0; i < result.obj.length; i++) {
                    $("#imgBox2").append(
                        '<div style="margin-left:5px;float:left;margin-top:5px;"><img width="100" height="100"onclick=\'showBig1(this)\'  src="' +
                        serverImage +
                        result.obj[i].image +
                        '"\/><\/div>'
                    );
                }
            },
        });
    };

    function showBig(t) {
        document.getElementById("bigImage").innerHTML =
            "<img src='" +
            t.src +
            "' onclick='closeBig(this)'  width='100%' style='border:3px solid #4f4f4f;'/>";
    }
    function closeBig(t) {
        document.getElementById("bigImage").innerHTML = "";
    }

    function showBig1(t) {
        document.getElementById("bigImage1").innerHTML =
            "<img src='" +
            t.src +
            "' onclick='closeBig1(this)'  width='100%' style='border:3px solid #4f4f4f;'/>";
    }
    function closeBig1(t) {
        document.getElementById("bigImage1").innerHTML = "";
    }
</script>

</html>